<template>
  <div class="slide-banner">
    <div class="banner-wrapper">
      <div class="slide-banner-scroll" ref="slide">
        <div class="slide-banner-wrapper">
          <div class="slide-item" v-for="(item, index ) of slides" :key="index">
            <img :src="item.picUrl" alt="">
          </div>
        </div>
      </div>
      <div class="docs-wrapper">
        <span
          class="doc"
          v-for="(items, index) in slides.length"
          :key="index"
          :class="{'active': currentPageIndex === index}">
        </span>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'

BScroll.use(Slide)
export default {
  name: 'slider',
  data () {
    return {
      slide: null,
      currentPageIndex: 0,
      playTimer: 0
    }
  },
  props: {
    slides: {
      type: Array
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    clearTimeout(this.playTimer)
    this.slide.destroy()
  },
  methods: {
    init () {
      clearTimeout(this.playTimer)
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true,
        scrollY: false,
        slide: {
          loop: true,
          threshold: 100
        },
        useTransition: true,
        momentum: false,
        bounce: false,
        stopPropagation: true,
        probeType: 2
      })
      this.slide.on('scrollEnd', this._onScrollEnd)

      // user touches the slide area
      this.slide.on('beforeScrollStart', () => {
        clearTimeout(this.playTimer)
      })
      // user touched the slide done
      this.slide.on('scrollEnd', () => {
        this.autoGoNext()
      })
      this.slide.on('slideWillChange', (page) => {
        this.currentPageIndex = page.pageX
      })
      this.autoGoNext()
    },
    _onScrollEnd () {
      this.autoGoNext()
    },
    nextPage () {
      this.slide.next()
    },
    autoGoNext () {
      clearTimeout(this.playTimer)
      this.playTimer = setTimeout(() => {
        this.nextPage()
      }, 4000)
    }
  }
}
</script>

<style lang="scss">

  .slide-banner {
    width: 100vw;
    .banner-wrapper {
      position: relative;
    }
    .slide-banner-scroll {
      min-height: 1px;
      width: 100vw;
      overflow: hidden
    }

    .slide-banner-wrapper {
      height: 200px;
      white-space: nowrap;
      font-size: 0;

      .slide-item {
        display: inline-block;
        height: 180px;
        width: 100%;
        line-height: 180px;
        text-align: center;
        font-size: 26px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }

    .docs-wrapper {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);

      .doc {
        display: inline-block;
        margin: 0 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #eee;

        &.active {
          width: 20px;
          border-radius: 5px
        }
      }
    }

    .btn-wrap {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      button {
        margin: 0 10px;
        padding: 10px;
        color: #fff;
        border-radius: 4px;
        background-color: #666
      }
    }
  }
</style>
